<template>
    <div class="content">
        <el-button @click="dialogVisible = true">{{ treeData.name }}广告</el-button>
        <!-- 表格 -->
        <el-table :data="tableData" style="width: 100%" border>
            <el-table-column prop="pid" label="PID" width="100"> </el-table-column>
            <el-table-column prop="name" label="名称" width="180"> </el-table-column>
            <el-table-column prop="url" label="访问地址" min-width="240" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="image" label="图片地址" min-width="240" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--新增广告内容----
      const pid = req.query.pid;
      const name = req.query.name;
      const contentUrl = req.query.url;
      const image = req.query.image;----------- -->
        <el-dialog title="新增广告内容" :visible="dialogVisible" width="30%" @close="dialogVisible = false">
            <el-form :model="formInline" class="demo-form-inline" size="small">
                <el-form-item label="广告名称">
                    <el-input v-model="formInline.name" placeholder="审批人"></el-input>
                </el-form-item>
                <el-form-item label="广告图片地址">
                    <el-input v-model="formInline.url" placeholder="审批人"></el-input>
                </el-form-item>
                <el-form-item label="图片">
                    <el-input v-model="formInline.image" placeholder="审批人"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addContent">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
//广告分类管理 内容增加
import { getselectTbContentAllByCategoryId, getinsertTbContent, getdeleteContentByIds } from '@/api/advert'

export default {
    props: {
        treeData: {
            type: Object,
            default: function () {
                return { name: "按钮" };
            },
        },
    },
    data() {
        return {
            tableData: [],
            dialogVisible: false,
            formInline: {
                image: '',
                url: '',
                name: ''
            },
            pid: '',
        };
    },
    watch: {
        treeData: function (val) {
            //清空数据
            this.tableData = [];
            this.pid = val.pid;
            getselectTbContentAllByCategoryId({
                pid: val.pid,
            })
                .then((res) => {
                    console.log('监听修改----------------', val, res.data);
                    if (res.status === 200) {
                        this.tableData = res.data.result;
                    } else {
                        //没有数据
                        this.tableData = [];
                    }
                });
        },
    },
    methods: {
        // 更新tableData
        http() {
            //更新tableData
            getselectTbContentAllByCategoryId({
                pid: this.pid
            }).then(res => {
                this.tableData = res.data.result;
            })
        },
        handleDelete(row) { 
            console.log('row----------------', row);
            this.$confirm('此操作将永久删除该广告, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                getdeleteContentByIds({ id: row.id }).then(res => {
                    if (res.data.status === 200) {
                        this.$message.success('删除成功');
                        this.http();
                    }
                })
            }).catch(() => {
                this.$message.info('已取消删除');
            });
        },
        //增加广告内容--弹框
        addContent() {
            let { image, url, name } = this.formInline;
            getinsertTbContent({
                pid: this.pid, image, url, name,
            })
                .then(res => {
                    if (res.data.status === 200) {
                        //添加成功
                        this.$message({
                            message: "恭喜你，添加广告成功",
                            type: "success",
                        });
                        //隐藏弹框--清空数据
                        this.dialogVisible = false;
                        this.formInline = {
                            image: '',
                            url: '',
                            name: ''
                        }
                        this.http();
                    } else {
                        //错误信息提示
                        this.$message.error("添加广告失败");
                    }
                })
        },
    },
};
</script>


<style scoped lang='less'>
.content {
    text-align: center;
    margin-left: 50px;
    width: 850px;

    >button {
        margin-bottom: 20px;
    }
}
</style>